<template>
  <div class="app-container">
    <el-form :inline="true" :model="accompanyParameter" class="demo-form-inline">
      <el-form-item label="陪诊工号">
        <el-input size="small" style="width: 150px" v-model="accompanyParameter.accompanyId" clearable
                  placeholder="用户名姓名"/>
      </el-form-item>
      <el-form-item label="陪诊姓名">
        <el-input size="small" style="width: 150px" v-model="accompanyParameter.name" clearable placeholder="用户名姓名"/>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input size="small" style="width: 150px" v-model="accompanyParameter.phone" clearable placeholder="联系电话"/>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input size="small" v-model="accompanyParameter.idCard" clearable placeholder="身份证号"/>
      </el-form-item>

      <el-form-item>
        <el-button size="small" @click="handleSearch">查询</el-button>
      </el-form-item>

    </el-form>
    <el-table
      id="out-table"
      class="el-table"
      border
      :data="relationList.list"
      style="width: 98%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        width="90"
      />
      <el-table-column
        align="center"
        prop="sex"
        label="性别"
        width="80"
      />
      <el-table-column
        align="center"
        prop="age"
        label="年龄"
        width="90"
      />
      <el-table-column
        align="center"
        prop="phone"
        label="联系电话"
        width="150"
      />
      <el-table-column
        align="center"
        prop="idCard"
        width="200"
        label="身份证号"
      />
      <el-table-column
        align="center"
        prop="address"
        label="详细地址"
        width="350"
      />
      <el-table-column
        align="center"
        prop="createTime"
        label="注册时间"
        width="220"
      />

      <el-table-column
        align="center"
        prop="accompanyId"
        label="工号"
        width="100"
      />

      <el-table-column
        align="center"
        prop="status"
        label="状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===0">正常</el-tag>
          <el-tag v-if="scope.row.status===1"> 审核中</el-tag>
          <el-tag v-if="scope.row.status===2"> 审核失败</el-tag>

        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">


          <el-button
            plain
            size="mini"
            @click="handleLook(scope.row.accompanyId)"
          >操作审核
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 审核-->

    <el-dialog :title="'审核陪诊人员信息'" width="42%" top="5%" :visible.sync="dialogFormVisible2">
      <el-form :model="accompany">
        <div class="box">
          <el-form-item label="陪诊姓名" :label-width="formLabelWidth">
            <el-input disabled style="width: 130px" v-model="accompany.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="陪诊年龄" :label-width="formLabelWidth">
            <el-input disabled style="width: 100px" v-model="accompany.age" autocomplete="off"></el-input>
          </el-form-item>
            <el-form-item   label="陪诊性别" :label-width="formLabelWidth">
              <el-select disabled filterable style="width: 120px" v-model="accompany.sex" placeholder="请选择">
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="2"></el-option>
              </el-select>
          </el-form-item>
        </div>
        <div class="box">
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input disabled style="width: 300px" v-model="accompany.idCard" autocomplete="off"></el-input>
          </el-form-item>

        </div>
        <div class="box">
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input disabled style="width: 130px" v-model="accompany.phone" autocomplete="off"></el-input>
          </el-form-item>

        </div>
        <div class="box">

          <el-form-item label="工作服照 " :label-width="formLabelWidth">
            <div class="demo-image__preview">
              <el-image
                fit="cover"
                style="width: 100px; height: 150px"
                :src="accompany.workImage"
                :preview-src-list="workImageList">
              </el-image>
            </div>

          </el-form-item>

          <el-form-item label="健康证照 " label-width="120px">
            <div class="demo-image__preview">
              <el-image
                fit="cover"
                style="width: 100px; height: 150px"
                :src="accompany.health"
                :preview-src-list="healthList">
              </el-image>
            </div>

          </el-form-item>


        </div>
        <div class="box">


        </div>
        <div class="box">

          <el-form-item label="身份证照 " :label-width="formLabelWidth">
            <div class="demo-image__preview">
              <el-image
                fit="cover"
                style="width: 150px; height: 100px"
                :src="accompany.main"
                :preview-src-list="mainList">
              </el-image>
              <el-image
                fit="cover"
                style="width: 150px; height: 100px;margin-left: 20px"
                :src="accompany.side"
                :preview-src-list="sideList">
              </el-image>
            </div>

          </el-form-item>


        </div>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="danger" @click="AuditAccompany(2)">审核失败</el-button>
        <el-button type="primary" @click="AuditAccompany(0)">审核通过</el-button>
      </div>
    </el-dialog>


    <!-- 分页-->
    <el-pagination
      background
      :current-page="relationList.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="relationList.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import amps from '@/components/Map/amps'
import {AuditAccompany, getAccompany, listAccompanyPage} from "@/api/accompany";

export default {
  name: 'relation',
  components: {
    amps
  },
  data() {
    return {
      //查询下的=》用来源
      options: [{
        value: 1,
        label: '移动端注册用户'
      }, {
        value: 2,
        label: '残联'
      }, {
        value: 3,
        label: '卫健委'
      }, {
        value: 4,
        label: '自费用户'
      }],
      accompanyParameter: {
        status:1
      }, //陪诊搜索条件
      accompany: {}, //陪诊搜索条件
      workImageList:[],
      healthList:[],
      mainList:[],
      sideList:[],
      accompanyInfo: [],
      relationList: [
      ],
      pageNum: 1,
      pageSize: 10,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      formLabelWidth: '100px',
      formLabelWidth2: '100px',
      popType: '',
      visible: false,
      orderParameter: {},
      postForm: {
        detailedAddress: '',
        longitude: '',
        latitude: ''
      },
      movies: {},
      drawer: false,
      tableData: [{
        name: '张师傅',
        address: '江苏省苏州市姑苏区金阊科技产业园 栋304',
        distance: '2.5km',
        phone: '18955788888',
        rate: '5'
      }, {
        name: '张师傅',
        address: '江苏省苏州市姑苏区金阊科技产业园 栋304',
        distance: '2.5km',
        phone: '18955788888',
        rate: '5'
      }],
      search: '',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
      ]
    }
  },
  created() {
    this.listAccompanyPage()
  },
  methods: {
    //审核陪诊
    AuditAccompany(status){
      AuditAccompany({
        accompanyId:this.accompany.accompanyId,
        status:status,
        uid: this.accompany.uid,
      }).then(res =>{
        if (res.success){
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.dialogFormVisible2 = false
          this.listAccompanyPage()


        }else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }


      })

    },

    //查看弹窗
    handleLook(accompanyId){
      this.dialogFormVisible2 = true
      getAccompany({
        accompanyId:accompanyId
      }).then(res =>{
        this.accompany = res.dataMap
        this.workImageList.push( this.accompany.workImage)
        this.healthList.push( this.accompany.health)
        this.mainList.push( this.accompany.main)
        this.sideList.push( this.accompany.side)

      })
    },

    //修改弹窗
    handleUpd() {
      this.dialogFormVisible = true

    },
    //勾选的信息
    handleSelectionChange(val) {
      console.log(val)

    },
    //搜索
    handleSearch() {
      this.listAccompanyPage()
    },
    listAccompanyPage() {
      listAccompanyPage(this.accompanyParameter,this.pageNum,this.pageSize).then(res => {
        this.relationList = res.dataMap
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.listAccompanyPage()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.listAccompanyPage()

      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
      this.listAccompanyPage()
    },
    handleNextClick() {
      this.pageNum++
      this.listAccompanyPage()
    },

  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.base-input {
  width: 200px;

}

.el-select .el-input {
  width: 110px;
}

.el-dialog__body {
  padding: 30px 40px;
}

.app-container {
  margin-top: 10px;
}

.el-pagination {
  float: right;
  margin: 10px 30px;
}

.el-table {
  margin: 10px 0px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
